<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>14_盒子模型-居中</title>

        <style>
            .wrapper {
                width: 1000px;
                height: 150px;
                border: 5px dashed black;
                margin: 10px 0;
                padding: 10px;

                /* 让行内元素和行内块元素水平居中（父元素） */
                text-align: center;

                /* 让行内元素和行内块元素垂直居中 （父元素）*/
                line-height: 150px;
            }

            #d1 {
                width: 100px;
                height: 50px;
                background-color: red;

                margin: 0 auto;
            }

            #d2 {
                display: inline-block;
                width: 100px;
                height: 50px;
                background-color: green;

                vertical-align: middle;
                line-height: 50px;

            }

            #d3 {
                background-color: yellow;
            }
        </style>

    </head>
    <body>
        <div class="wrapper">
            <div id="d1">块元素</div>
        </div>

        <div class="wrapper">
            <div id="d2">行内块</div>
        </div>

        <div class="wrapper">
            <span id="d3">行内元素</span>
        </div>
    </body>
</html>